<template>
    <div class="user">
        <div class="pane">
            <div class="pane_div">
                <div class="pane_div_zi" @click="userdata.userbool = true"
                    :class="userdata.userbool == true ? 'actcolor' : ''">登录
                </div>
                <div class="pane_div_zi" @click="userdata.userbool = false"
                    :class="userdata.userbool == true ? '' : 'actcolor'">注册
                </div>
            </div>
            <div class="login" v-if="userdata.userbool">
                <el-input class="user_input" v-model="userdata.login.name" :clearable="true" placeholder="输入账号"
                    :minlength="3" :maxlength="10">

                    <template #prefix>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                    </template>
                </el-input>
                <!-- <div v-if="userdata.boolsd">账号长度小于3</div> -->
                <el-input class="user_input" v-model="userdata.login.pwd" :clearable="true" type="password" :minlength="6"
                    :maxlength="20" placeholder="输入密码" show-password>
                    <template #prefix>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
                <el-button style="width: 100%; height:40px;" @click="loginmethod()" type="primary" plain>登录</el-button>
            </div>

            <div class="enroll" v-else>
                <el-input class="user_input" v-model="userdata.enroll.name" :clearable="true" :minlength="3" :maxlength="10"
                    placeholder="输入账号">

                    <template #prefix>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                    </template>
                </el-input>

                <el-input class="user_input" v-model="userdata.enroll.pwd" :clearable="true" :minlength="6" :maxlength="20"
                    type="password" placeholder="输入密码" show-password>
                    <template #prefix>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
                <el-button style="width: 100%; height:40px;" @click="enrollmethod()" type="primary" plain>注册</el-button>
            </div>

        </div>
    </div>
</template>

<script setup  lang="ts">
import { onMounted, reactive, toRefs } from "vue";
import http, { format, setItem ,getItem} from "@/utils";

import { showSuccessToast, showFailToast } from 'vant';
import { useRouterAction } from "@/utils/router";
const { back, push } = useRouterAction()
const userdata: {
    login: { name: string, pwd: string }, enroll: { name: string, pwd: string }, userbool: boolean, boolsd: boolean,
    under: boolean, above: boolean
} = reactive({
    login: {
        name: "",
        pwd: ""
    },
    enroll: {
        name: "",
        pwd: ""
    },
    userbool: true,
    boolsd: false,

})
//登录
const loginmethod = async () => {
    if (judgment(userdata.login)) {
        let res = await http.user({ name: userdata.login.name, pwd: userdata.login.pwd })
        setItem("token", res)
        userdv("登录成功")
    }
}
//注册
const enrollmethod = async () => {
    if (judgment(userdata.enroll)) {
        let ret = await http.add({
            name: userdata.enroll.name,
            pwd: userdata.enroll.pwd
        })
         let res = await http.user({name: userdata.enroll.name, pwd: userdata.enroll.pwd})

        setItem("token", res)
        await userdv("注册成功")
        console.log("res",localStorage.getItem("token"))
        showSuccessToast("showSuccessToast")
    }
}
//存储用户信息加跳转
const userdv = async (text: string) => {
    let ret = await http.info()
    setItem("userinfo", ret)
    showSuccessToast(text);
    push({ name: "appHome" })
}
//判断是否为空
const judgment = (user: { name: string, pwd: string }) => {
    if (user.name.length >= 3) {
        if (user.pwd.length >= 6) {

            return true
        } else {
            showFailToast("密码长度小于6")
            return false
        }
        return true
    } else {
        showFailToast("账号长度小于3")
        return false
    }
}
</script>

<style lang="less" scoped>
.user {
    width: 100%;
    height: 100vh;
    background-image: url(../../../public/bj.jpg);
    background-size: cover;
    display: flex;
    align-items: center;

    .pane {
        width: 400px;
        //height: 400px;
        //border: 1px solid #000;
        margin-left: 200px;
        background-color: #cac5b91a;
        box-shadow: 10px 15px 10px #000;
        padding: 35px;
        border-radius: 15px;

        /deep/.el-input__wrapper {

            background: none;
        }

        .user_input {
            height: 45px;
            margin-bottom: 15px;
        }

        .pane_div {
            display: flex;
            font-size: 18px;
            font-weight: 900;
            color: aliceblue;

            .pane_div_zi {
                margin-left: 12px;
                margin-bottom: 6px;
            }
        }
    }

    .actcolor {
        color: blanchedalmond;
    }


}
</style>

